<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/16
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    String static_path = path + "/static/alpha";
%>
<html>
<head>
    <title>员工添加</title>
    <link rel="stylesheet" href="<%=static_path%>/dist/css/diyUpload.css">
    <link rel="stylesheet" href="<%=static_path%>/dist/css/webuploader.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<%=static_path%>/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/select2/select2.min.css">

</head>
<body>

<div class="wrapper">



    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>添加员工</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">
                                <a href="<%=path%>/manage/user/login">返回登录</a>
                            </li>
                            <li class="breadcrumb-item active">你的姓名：${user.name}</li>
                            <li class="breadcrumb-item active">你的工号：${user.jobNum}</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div style="margin-left: 200px;" class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-6">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">修改密码</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" action="<%=path%>/manage/user/changePassword" method="post" id="password-submit">
                                <div class="card-body">
                                    <input type="hidden" value="${user.id}" name="id">
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">新密码：</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1"   placeholder="请输入新密码" name="password">
                                        <span></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">请确认新密码：</label>
                                        <input type="password" class="form-control" id="confirmPassword" placeholder="请确认新密码" ><span></span>
                                    </div>
                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">确认修改</button>
                                </div>
                            </form>
                        </div>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="<%=static_path%>/plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap 4 -->
<script src="<%=static_path%>/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->

<!-- Select2 -->
<script src="<%=static_path%>/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.js"></script>
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="<%=static_path%>/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="<%=static_path%>/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="<%=static_path%>/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="<%=static_path%>/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="<%=static_path%>/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="<%=static_path%>/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="<%=static_path%>/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<%=static_path%>/dist/js/demo.js"></script>
<script src="<%=static_path%>/plugins/wjsc/diyUpload.js"></script>
<script src="<%=static_path%>/plugins/wjsc/webuploader.html5only.min.js"></script>
<script src="<%=path%>/static/X-admin-2.3/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#exampleInputPassword1").blur(checkNewPassword);
        $("#confirmPassword").blur(confirmNewPassword);
        $("#password-submit").submit(check);

    });
    function check()
    {
        var flagNewPassword= checkNewPassword();
        var confirmPassword= confirmNewPassword();
        return flagNewPassword&&confirmPassword;
    }
    function checkNewPassword() 
    {
        var verifynewpassword=/^\d{5,15}$/;
        var newpassword=$("#exampleInputPassword1").val();
        var flag=verifynewpassword.test(newpassword);
        if (newpassword=="")
        {
            $("#exampleInputPassword1").next().css("color","red");
            $("#exampleInputPassword1").next().html("密码不能为空");
            return false;
        }
        else
        {
            if (flag==true)
            {
                $("#exampleInputPassword1").next().css("color","green");
                $("#exampleInputPassword1").next().html("密码格式正确");
                return true;
            }
            else
            {
                $("#exampleInputPassword1").next().css("color","red");
                $("#exampleInputPassword1").next().html("密码格式错误");
                return false;
            }
        }
    }
    function confirmNewPassword()
    {
        var verifyconfimpassword=/^\d{5,15}$/;
        var confirmpassword=$("#confirmPassword").val();
        var newpassword=$("#exampleInputPassword1").val();
        var flag=verifyconfimpassword.test(confirmpassword);
        if (confirmpassword=="")
        {
            $("#confirmPassword").next().css("color","red");
            $("#confirmPassword").next().html("密码不能为空");
            return false;
        }
        else
        {
            if (flag==true)
            {
                // $("#confirmPassword").next().css("color","green");
                // $("#confirmPassword").next().html("密码格式正确");
                // return true;
                if (confirmpassword==newpassword)
                {
                    $("#confirmPassword").next().css("color","green");
                    $("#confirmPassword").next().html("确认密码与新密码一致");
                    return true;
                }
                else
                {
                    $("#confirmPassword").next().css("color","red");
                    $("#confirmPassword").next().html("确认密码与新密码不一致");
                    return false;
                }
            }
            else
            {
                $("#confirmPassword").next().css("color","red");
                $("#confirmPassword").next().html("密码格式错误");
                return false;
            }
        }
    }


</script>
<script>

    //////////////////////////////////////////////////////////////////////////////////////
    $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('yyyy-MM-dd', {//yyyy
            'placeholder': 'yyyy-MM-dd'
        })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('yyyy-MM-dd', {
            'placeholder': 'yyyy-MM-dd'
        })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date range picker
        $('#reservation').daterangepicker()
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            format: 'YYYY/MM/DD h:mm A'
        })
        //Date range as a button
        $('#daterange-btn').daterangepicker({
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                startDate: moment().subtract(29, 'days'),
                endDate: moment()
            },
            function(start, end) {
                $('#reportrange span').html(start.format('YYYY,MMMM ,D,') + ' - ' + end.format('YYYY,MMMM ,D,'))
            }
        )

        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        })
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red'
        })
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        })
        //Colorpicker
        $('.my-colorpicker1').colorpicker()
        //color picker with addon
        $('.my-colorpicker2').colorpicker()

        //Timepicker
        $('.timepicker').timepicker({
            showInputs: false
        })
    })



</script>

</body>
</html>
